<template>
	<div class="box">
		<el-card class="card-css">
			<div class="zhpj">
				<span class="zhpj-span">报表打印</span>
			</div>

			<div class="table-css">
				<div class="btn-css">
					<el-button type="success" @click="machine_data"
						>冷机数据</el-button
					>
					<el-button type="success" @click="operating_data"
						>运行数据</el-button
					>
					<el-button type="success" @click="qualified"
						>能耗能效</el-button
					>
					<el-button type="success" @click="dialogVisible = true"
						>自定义</el-button
					>
				</div>
				<div class="select01">
					<el-select placeholder="商场">
						<el-option label="Zone one" value="shanghai" />
						<el-option label="Zone two" value="beijing" />
					</el-select>
				</div>

				<div class="select02">
					<el-select placeholder="一小时">
						<el-option label="Zone one" value="shanghai" />
						<el-option label="Zone two" value="beijing" />
					</el-select>
				</div>

				<div class="block">
					<el-date-picker
						type="daterange"
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
					/>
				</div>

				<div class="btn-01">
					<el-button type="primary">下 载</el-button>
				</div>
				<div class="btn-02">
					<el-button type="primary">打 印</el-button>
				</div>
			</div>

			<div class="table" v-if="tableStatus == 'machineData'">
				<el-table
					:data="tableData"
					style="width: 100%"
					:header-cell-style="{
						'text-align': 'center',
						background: '#B4C7E7',
						color: '#333333',
					}"
					:cell-style="{
						'text-align': 'center',
						background: '#f5f8fb',
					}"
				>
					<el-table-column prop="date" label="时间" width="150" />

					<el-table-column label="冷机运行状态">
						<el-table-column prop="status_one" label="1#"
							><template v-slot:header
								>1#<el-checkbox /> </template
						></el-table-column>
						<el-table-column prop="status_two" label="2#"
							><template v-slot:header
								>2#<el-checkbox /> </template
						></el-table-column>
						<el-table-column prop="status_three" label="2#"
							><template v-slot:header
								>2#<el-checkbox /> </template
						></el-table-column>

						<template v-slot:header
							>冷机运行状态 <el-checkbox /> </template
					></el-table-column>
					<el-table-column label="冷机运行功率">
						<el-table-column prop="power_one" label="1#"
							><template v-slot:header
								>1#<el-checkbox /> </template
						></el-table-column>
						<el-table-column prop="power_two" label="2#"
							><template v-slot:header
								>2#<el-checkbox /> </template
						></el-table-column>
						<el-table-column prop="power_three" label="3#"
							><template v-slot:header
								>3#<el-checkbox /> </template
						></el-table-column>

						<template v-slot:header
							>冷机运行功率<el-checkbox />
						</template>
					</el-table-column>
					<el-table-column label="冷机冷冻水出水温度（℃）">
						<el-table-column prop="temperature_one" label="1#"
							><template v-slot:header
								>1#<el-checkbox /> </template
						></el-table-column>
						<el-table-column prop="temperature_two" label="2#"
							><template v-slot:header
								>2#<el-checkbox /> </template
						></el-table-column>
						<el-table-column prop="temperature_three" label="3#"
							><template v-slot:header
								>3#<el-checkbox /> </template
						></el-table-column>

						<template v-slot:header
							>冷机冷冻水出水温度（℃）<el-checkbox />
						</template>
					</el-table-column>
					<el-table-column label="冷机负载（%）">
						<el-table-column prop="load_one" label="1#"
							><template v-slot:header
								>1#<el-checkbox /> </template
						></el-table-column>
						<el-table-column prop="load_two" label="2#"
							><template v-slot:header
								>2#<el-checkbox /> </template
						></el-table-column>
						<el-table-column prop="load_three" label="3#"
							><template v-slot:header
								>3#<el-checkbox /> </template
						></el-table-column>

						<template v-slot:header
							>冷机负载（%）<el-checkbox />
						</template>
					</el-table-column>
				</el-table>
				<div class="pagination">
					<el-pagination
						layout="prev, pager, next, jumper"
						:total="1000"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
					/>
				</div>
			</div>

			<div class="table" v-else-if="tableStatus == 'operatingData'">
				<el-table
					:data="tableDataOperating"
					style="width: 100%"
					border
					:header-cell-style="{
						'text-align': 'center',
						background: '#B4C7E7',
						color: '#333333',
					}"
					:cell-style="{
						'text-align': 'center',
						background: '#f5f8fb',
					}"
				>
					<el-table-column prop="date" label="时间" />
					<el-table-column prop="water" label="冷冻水供水温度">
						<template v-slot:header
							>冷冻水供水温度<el-checkbox /> </template
					></el-table-column>
					<el-table-column prop="backwater" label="冷冻水回水温度"
						><template v-slot:header
							>冷冻水回水温度<el-checkbox /> </template
					></el-table-column>
					<el-table-column
						prop="onewater"
						label="1#、2#冷却塔出塔水温"
						><template v-slot:header
							>1#、2#冷却塔出塔水温<el-checkbox /> </template
					></el-table-column>
					<el-table-column prop="twowater" label="3#冷却塔出塔水温"
						><template v-slot:header
							>3#冷却塔出塔水温<el-checkbox /> </template
					></el-table-column>
					<el-table-column prop="power" label="冷源机房功率"
						><template v-slot:header
							>冷源机房功率<el-checkbox /> </template
					></el-table-column>
					<el-table-column prop="efficiency" label="系统实时效率"
						><template v-slot:header
							>系统实时效率<el-checkbox /> </template
					></el-table-column>
				</el-table>
				<div class="pagination">
					<el-pagination
						v-model:page-size="pageSize3"
						layout="prev, pager, next, jumper"
						:total="1000"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
					/>
				</div>
			</div>

			<div class="table" v-else-if="tableStatus == 'qualified'">
				<el-table
					:data="tableDataQualified"
					style="width: 100%"
					border
					:header-cell-style="{
						'text-align': 'center',
						background: '#B4C7E7',
						color: '#333333',
					}"
					:cell-style="{
						'text-align': 'center',
						background: '#f5f8fb',
					}"
				>
					<el-table-column prop="date" label="时间" />
					<el-table-column prop="energy" label="冷战今日能耗（kWh）">
						<template v-slot:header
							>冷战今日能耗（kWh）<el-checkbox /> </template
					></el-table-column>
					<el-table-column
						prop="refrigerating"
						label="今日制冷量  （tonh）"
						><template v-slot:header
							>今日制冷量 （tonh）<el-checkbox /> </template
					></el-table-column>
					<el-table-column
						prop="computerroom"
						label="今日机房效率（kW/ton）"
						><template v-slot:header
							>今日机房效率（kW/ton）<el-checkbox /> </template
					></el-table-column>
					<el-table-column
						prop="machineefficiency"
						label="今日冷机效率（kW"
						><template v-slot:header
							>今日冷机效率（kW/ton）<el-checkbox /> </template
					></el-table-column>
					<el-table-column
						prop="afrozen"
						label="今日一次冷冻泵效率（kW"
						><template v-slot:header
							>今日一次冷冻泵效率（kW/ton）<el-checkbox /> </template
					></el-table-column>
					<el-table-column
						prop="refrigeran"
						label="今日二次冷冻泵效率（kW"
						><template v-slot:header
							>今日二次冷冻泵效率（kW/ton）<el-checkbox /> </template
					></el-table-column>

					<el-table-column
						prop="pumpefficiency"
						label="今日冷却泵效率（kW/ton）"
						><template v-slot:header
							>今日冷却泵效率（kW/ton）<el-checkbox /> </template
					></el-table-column>

					<el-table-column
						prop="towerefficiency"
						label="今日冷却塔效率（kW/ton）"
						><template v-slot:header
							>今日冷却塔效率（kW/ton）<el-checkbox /> </template
					></el-table-column>

					<el-table-column
						prop="average_temperature"
						label="平均干球温度 （℃）"
						><template v-slot:header
							>平均干球温度 （℃）<el-checkbox /> </template
					></el-table-column>

					<el-table-column
						prop="minimum_temperature"
						label="最低干球温度 （℃）"
						><template v-slot:header
							>最低干球温度 （℃）<el-checkbox /> </template
					></el-table-column>

					<el-table-column
						prop="maximum_temperature"
						label="最高干球温度  （℃）"
						><template v-slot:header
							>最高干球温度 （℃）<el-checkbox /> </template
					></el-table-column>
				</el-table>
				<div class="pagination">
					<el-pagination
						v-model:page-size="pageSize3"
						layout="prev, pager, next, jumper"
						:total="1000"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
					/>
				</div>
			</div>
		</el-card>
		<!-- 自定义弹框 -->
		<el-dialog
			v-model="dialogVisible"
			title="自定义"
			width="504px"
			class="zdyDialog"
		>
			<div class="checkbox-div">
				<div>
					<el-checkbox v-model="checked1" label="全选" size="large" />
				</div>
				<div>冷机数据</div>
				<div>
					<el-checkbox v-model="checked1" label="时间" size="large" />
				</div>
				<div>
					<el-tree
						:data="testdata"
						ref="tree"
						show-checkbox
						:check-strictly="true"
						node-key="id"
						:props="defaultProps"
						@check-change="treeCheckedChange"
						:default-expanded-keys="[2, 3]"
						:default-checked-keys="[5]"
					>
					</el-tree>
				</div>
				<div>运行数据</div>
				<div>
					<el-checkbox v-model="checked1" label="时间" size="large" />
				</div>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false" class="quxiao-btn"
						>取消</el-button
					>
					<el-button
						type="primary"
						@click="dialogVisible = false"
						class="sava-btn"
						>保存</el-button
					>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref } from "vue";
const tableStatus = ref("machineData");
let dialogVisible = ref(false);
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}
let testdata = ref([
	{
		id: "1",
		label: "冷机运行状态",
		children: [
			{
				label: "1#",
			},
			{
				label: "2#",
			},
			{
				label: "3#",
			},
		],
	},
	{
		id: "2",
		label: "冷机运行功率",
		children: [
			{
				label: "1#",
			},
			{
				label: "2#",
			},
			{
				label: "3#",
			},
		],
	},
	{
		id: "3",
		label: "冷机冷冻水出水温度（℃）",
		children: [
			{
				label: "1#",
			},
			{
				label: "2#",
			},
			{
				label: "3#",
			},
		],
	},
	{
		id: "4",
		label: "冷机负载（%）",
		children: [
			{
				label: "1#",
			},
			{
				label: "2#",
			},
			{
				label: "3#",
			},
		],
	},
]);

const tableData = ref([
	{
		date: "2016-05-03",
		status_one: "关",
		status_two: "关",
		status_three: "关",
		power_one: "0.573",
		power_two: "0.573",
		power_three: "0.573",
		temperature_one: "21.83",
		temperature_two: "21.83",
		temperature_three: "21.83",
		load_one: "0.000",
		load_two: "0.000",
		load_three: "0.000",
	},
]);

const tableDataOperating = ref([
	{
		date: "2016-05-03",
		water: "21.86",
		backwater: "21.86",
		onewater: "21.86",
		twowater: "21.86",
		power: "21.86",
		efficiency: "21.86",
	},
]);

const tableDataQualified = ref([
	{
		date: "2016-05-03",
		energy: "0.000",
		refrigerating: "0.000",
		computerroom: "0.000",
		machineefficiency: "0.000",
		afrozen: "0.000",
		refrigeran: "0.000",
		pumpefficiency: "0.000",
		towerefficiency: "0.000",
		average_temperature: "0.000",
		minimum_temperature: "0.000",
		maximum_temperature: "0.000",
	},
]);
const machine_data = () => {
	tableStatus.value = "machineData";
};
const operating_data = () => {
	tableStatus.value = "operatingData";
};

const qualified = () => [(tableStatus.value = "qualified")];
</script>

<style lang="less" scoped>
.box {
	display: flex;
	.card-css {
		flex: 1;
		width: 1760px;
		height: 817px;
		position: relative;
		.zhpj {
			position: absolute;
			border-bottom: 1px solid #d9deec;
			margin-right: 120px;
			margin-left: -20px;
			padding-left: 20px;
			padding-bottom: 20px;
			width: 100%;
			.zhpj-span {
				font-family: SourceHanSansSC-medium;
				font-weight: 700;
				color: #4d62a5;
				font-size: 20px;
			}
		}
		.table-css {
			display: flex;
			margin-top: 66px;
			justify-content: end;
			.select01 {
				width: 100px;
			}
			.select02 {
				width: 100px;
				margin-right: 20px;
				margin-left: 20px;
			}
			.btn-01 {
				margin-left: 20px;
				margin-right: 20px;
			}
			.el-button {
				background-color: #8faadc;
				border-color: #8faadc;
			}
			.btn-css {
				flex-grow: 1;
			}
		}
	}

	.table {
		margin-top: 20px;

		.el-checkbox {
			top: 3px;
			margin-left: 5px;
		}
	}
	.pagination {
		display: flex;
		justify-content: flex-end;
	}
}
:deep(.el-dialog__title) {
	color: #4d62a5;
}
.zdyDialog {
	width: 1000px;
}
.sava-btn {
	border-color: #8faadc;
	background-color: #8faadc;
}
.quxiao-btn {
	border-color: #cccccc;
	background-color: #cccccc;
	color: #fff;
}

:deep(.el-tree-node.is-expanded > .el-tree-node__children) {
	display: inline-flex;
}
.checkbox-div > div {
	margin-bottom: 10px;
}
:deep(.el-tree-node__content) {
	margin-bottom: 8px;
}

:deep(.el-dialog__body) {
	border-top: 1px solid #e7eaf3;
	border-bottom: 1px solid #e7eaf3;
}
</style>
